<template>
    <div class="main">
        <van-nav-bar title="全景视图" left-arrow @click-left="onClickLeft">
        </van-nav-bar>

        <div class="back"></div>
        <div class="top-box">
            <div class="tool-box">
                <div class="area-box" @click="showAreaPicker = true">
                    <!-- <van-icon name="location" /> -->
                    <img src="../../assets/pan-view/位置 (2).png" />
                    <div>{{ area }}</div>
                    <van-icon name="arrow-down" />
                </div>
                <div class="time-box" @click="showDatePicker = true">
                    <!-- <van-icon name="location" /> -->
                    <img src="../../assets/pan-view/riqi.png" />
                    <div>{{ times }}</div>
                </div>
            </div>

            <div class="title">{{ title }}</div>

            <div class="change-box" @click="showPicker = true">
                <van-icon name="exchange" />
                <div>切换数据</div>
            </div>
        </div>

        <!-- 政企-->
        <div class="contents">
            <internet :itemObj="itemObj" />
            <tv :itemObj="tvChart" />
            <!-- propObj -->

            <radar :propObj="radarChart" />
        </div>
        <!-- 切换数据 -->
        <chang-data :showPicker="showPicker" :sIndex="4" @hiddenPicker="hiddenPicker"></chang-data>

        <!-- 切换地市 -->
        <van-popup v-model:show="showAreaPicker" round position="bottom">
            <van-picker :columns="areaData" :columns-field-names="areaFieldName" @cancel="showAreaPicker = false" @confirm="onAreaConfirm" />
        </van-popup>

        <!-- 切换日期 -->
        <van-popup v-model:show="showDatePicker" round position="bottom">
            <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @cancel="showDatePicker = false" @confirm="onDateConfirm" />
        </van-popup>
    </div>
</template>

<script>
import "@/api/index"
import { ref, reactive, toRefs, onMounted } from "vue"
import store from "@/store/index"
import { useRouter } from "vue-router"
import changData from "@/components/chang-data.vue"
import internet from "./components/internet.vue"
import tv from "./components/tv.vue"
import radar from "./components/radar.vue"

import moment from "moment"
export default {
    components: {
        changData,
        internet,
        tv,
        radar
    },
    setup() {
        let state = reactive({
            showPicker: false,
            showDatePicker: false,
            showAreaPicker: false,
            area: "全省",
            areaData: [
                { areaName: "全省", areaId: "0001" },
                { areaName: "南京市", areaId: "0001" },
                { areaName: "扬州市", areaId: "0001" },
                { areaName: "泰州市", areaId: "0001" },
                { areaName: "苏州市", areaId: "0001" },
                { areaName: "常州市", areaId: "0001" }
            ],
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            times: moment().format("YYYYMM"),
            title: "家宽",
            itemObj: [
                {
                    title: "高投诉小区整治达标率",
                    value: "80.4%",
                    hb: "-10.75%"
                },
                {
                    title: "千兆客户家庭成员绑定率",
                    value: "3.4%",
                    hb: "10.75%"
                },
                {
                    title: "新增高带宽千兆路由占比",
                    value: "80.4%",
                    hb: "10.75%"
                },
                {
                    title: "存量高带宽千兆路由占比",
                    value: "80.4%",
                    hb: "-10.75%"
                }
            ],
            tvChart: {
                title: "电视",
                index: 2,
                monthSatisfaction: "92.64%",
                ranking: 12,
                hb: "-0.68%",
                chartObj: {
                    yAxisData: [
                        213, 326, 430, 266, 330, 538, 640, 830, 466, 230
                    ],
                    barYData: [
                        111, 223, 342, 232, 456, 523, 545, 923, 342, 450
                    ],
                    xAxisData: [
                        "10/01",
                        "10/02",
                        "10/03",
                        "10/04",
                        "10/05",
                        "10/06",
                        "10/07",
                        "10/08",
                        "10/09",
                        "10/10"
                    ],
                    title: "环比",
                    barTitle: "质差机顶盒更换完成率",
                    lineColor: "#FF9900",
                    barColor: "#7C9FF5"
                }
            },
            radarChart: {
                title: "饼状图",
                names: [
                    "24小时故障处理及时率(城区)",
                    "宽带自助排障占比",
                    "修障问题工单占比",
                    "装机问题工单占比",
                    "24小时故障处理及时率"
                ],
                values: ["98", "95", "97", "99", "99.4"]
            }
        })

        const formatter = (type, val) => {
            if (type === "year") {
                return `${val}年`
            }
            if (type === "month") {
                return `${val}月`
            }
            return val
        }
        const onClickLeft = () => history.back()
        function hiddenPicker(isShow) {
            state.showPicker = isShow
        }
        const router = useRouter()
        const customFieldName = {
            text: "title"
        }
        const onConfirm = (value) => {
            console.log(value)
            state.showPicker = false
            state.title = value.title
            state.id = value.id
        }

        const areaFieldName = {
            text: "areaName"
        }
        const onAreaConfirm = (value) => {
            console.log(value)
            state.showAreaPicker = false
            state.area = value.areaName
            state.id = value.id
        }
        const onDateConfirm = (value) => {
            state.showDatePicker = false
            state.times = moment(value).format("YYYYMM")
        }
        onMounted(() => {
            state.wellChartObj = {
                yAxisData: [113, 226, 330, 466],
                xAxisData: [
                    "2022年第1期",
                    "2022年第2期",
                    "2022年第3期",
                    "2022年第4期"
                ],
                title: "综合满意度",
                lineColor: "#7C9FF5",
                areaClolor: "#7C9FF5"
            }
        })
        return {
            ...toRefs(state),
            onClickLeft,
            customFieldName,
            onConfirm,
            areaFieldName,
            onAreaConfirm,
            formatter,
            onDateConfirm,
            hiddenPicker
        }
    }
}
</script>

<style scoped lang="scss">
.main {
    // background: url("../../assets/pan-view/bg_TOP.png") no-repeat 0 0;
    background-size: 100%;
    height: 100%;
    width: 100%;
    overflow: hidden;

    .back {
        position: absolute;
        left: 0px;
        top: 0px;
        background: url("../../assets/pan-view/bg_TOP.png") no-repeat 0 0;
        background-size: 100% 100%;
        width: 100%;
        height: 212px;
        z-index: -1;
    }

    .top-box {
        width: 100%;
        height: 100px;

        .tool-box {
            margin: 10px;
            width: calc(100% - 20px);
            height: 30px;
            display: flex;
            justify-content: space-between;

            .area-box {
                background: rgba(241, 104, 0, 0.6);
                width: 94px;
                height: 30px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: #ffffff;
                font-size: 12px;
                border-radius: 5px;

                img {
                    height: 14px;
                    width: 14px;
                }
            }

            .time-box {
                background: rgba(255, 255, 255, 1);
                width: 84px;
                height: 30px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: black;
                font-size: 12px;
                border-radius: 5px;

                img {
                    height: 14px;
                    width: 14px;
                }
            }
        }

        .title {
            font-size: 24px;
            margin: 10px;
            color: #ffffff;
        }
        .change-box {
            margin: 10px;
            background: #ffffff;
            width: 84px;
            height: 25px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #ff9900;
            font-size: 12px;
            border-radius: 12.5px;
        }
    }

    .contents {
        margin-top: 10px;
        width: 100%;
        height: calc(100% - 154px);
        padding-bottom: 10px;
        overflow: auto;
    }
}

::v-deep .van-nav-bar {
    background: transparent !important;
}
::v-deep .van-nav-bar .van-icon {
    color: #ffffff !important;
}

::v-deep .van-nav-bar__title {
    color: #ffffff !important;
}
</style>
